<template>
  <div class="f-sub-nav" :class="{ active,vertical }" v-click-outside="close">
    <span @click="onClick" class="f-sub-nav-label">
      <slot name="title"></slot>
      <span class="f-sub-nav-icon" :class="{ open,vertical }">
        <f-icon name="right"></f-icon>
      </span>
    </span>

    <template v-if="vertical">
        <transition name="x" @enter="enter" @leave="leave" @after-leave="afterLeave" @after-enter="afterEnter">
            <div class="f-sub-nav-popover" v-show="open" :class="{ vertical }">
                <slot></slot>
            </div>
        </transition>
    </template>
    <template v-else>
        <div class="f-sub-nav-popover" v-show="open" >
            <slot></slot>
        </div>
    </template>

  </div>
</template>

<script>
import ClickOutside from "../components/click-outside";
import FIcon from "../components/icon";
export default {
  name: "FSubNav",
  components: { FIcon },
  directives: { ClickOutside },
  inject: ["root", "vertical"],
  props: {
    name: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      open: false
    };
  },
  computed: {
    active() {
      return this.root.namePath.indexOf(this.name) >= 0;
    }
  },
  methods: {
    enter(el,done){
      el.style.height = 'auto';
      let {height} = el.getBoundingClientRect();

      //如果两次设置之间没有其它操作，浏览器会进行合并
      el.style.height = '0px';
      el.getBoundingClientRect();
      el.style.height = `${height}px`;

      el.addEventListener('transitionend', () => {
        done();//调用done 就会马上执行 afterEnter
      });
    },
    afterEnter(el){
      el.style.height = 'auto';
    },
    leave(el,done){
      let {height} = el.getBoundingClientRect();
      el.style.height = `${height}px`;
      el.getBoundingClientRect();
      el.style.height = '0px';

      el.addEventListener('transitionend', () => {
        done(); //调用done 就会马上 display:none 并执行afterLeave
      });
    },
    afterLeave(el){
      // el.style.height = 'auto';
    },
    onClick() {
      this.open = !this.open;
    },
    close() {
      this.open = false;
    },
    updateNamePath() {
      this.root.namePath.unshift(this.name);
      if (this.$parent.updateNamePath) {
        this.$parent.updateNamePath();
      } else {
      }
    }
  }
};
</script>

<style lang="scss">
@import "../components/var";

.f-sub-nav {
  position: relative;
  &:not(.vertical){
      &.active {
          &::after {
              content: "";
              position: absolute;
              bottom: 0;
              left: 0;
              border-bottom: 1px solid $blue;
              width: 100%;
          }
      }
  }

  &-label {
    padding: 10px 20px;
    display: block;
  }
  &-icon {
    display: none;
  }
  &-popover {
    background: #fff;
    box-shadow: 0 0 3px fade_out(black, 0.7);
    border-radius: $border-radius;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    white-space: nowrap;
    min-width: 6em;
    color: $light-color;
    font-size: $font-size;

    transition:height 250ms;
    &.vertical {
      position: static;
      border-radius: 0;
      border: none;
      box-shadow: none;
      overflow:hidden;
    }
  }
}

.f-sub-nav .f-sub-nav {
  &.active {
    &::after {
      display: none;
    }
  }
  .f-sub-nav-popover {
    top: 0;
    left: 100%;
    margin-left: 8px;
  }
  .f-sub-nav-label {
    display: flex;
    align-items: center;
  }
  .f-sub-nav-icon {
    display: inline-flex;
    margin-left: 1em;
    transition: transform 0.25s;

    svg {
      fill: $light-color;
    }

    &.vertical{
      transform: rotate(90deg);
      &.open {
        transform: rotate(270deg);
      }
    }

    &.open {
      transform: rotate(180deg);
    }
  }
}
</style>
